<section class='console' ng:controller='Top.Game.Console as Console'>
<div class='console-controls'>
<md-button class='md-primary md-hue-1' ng-click='Console.toggleEnabled()' tooltip-placement='right' uib-tooltip-html="((Console.isEnabled() ? 'Pause' : 'Resume') + '&amp;nbsp;tracking') | trust">
<i class='fa fa-pause' ng-if='Console.isEnabled()'></i>
<i class='fa fa-play' ng-if='!Console.isEnabled()'></i>
</md-button>
<md-button class='md-primary md-hue-1' ng-click='Console.clear()' tooltip-placement='right' uib-tooltip='Clear'>
<i class='fa fa-trash'></i>
</md-button>
</div>
<div class='console-messages-list' scroll-glue scroll-if='Console.getMessages()'>
<div class='console-message' ng:class="{'console-error': message.error, 'console-out': message.out, 'console-in': message.in}" ng:repeat='message in Console.getMessages() track by $index'>
<div class='timestamp' ng:if='message.date &amp;&amp; !message.in'>[{{message.date.toLocaleTimeString()}}]</div>
<div class='shard' ng-if='message.shard &amp;&amp; !message.in'>[{{message.shard}}]</div>
<div class='fa fa-chevron-right' ng:if='message.out'></div>
<div class='fa fa-chevron-left' ng:if='message.in'></div>
<span ng:bind-html='message.text | trust'></span>
</div>
</div>
<form class='console-input' ng:submit='Console.sendCommand()'>
<div class='fa fa-chevron-right'></div>
<div class='tutorial-dummy'></div>
<div class='ace-container'>
<div app:cursor-to-end-on-event='consoleHistorySwitched' app:focus-on-event='consoleTabSelect' ng:model='Console.command' ui-ace='Console.aceOptions'></div>
</div>
</form>
</section>
